<template>
  <el-row>
    <el-col>
      <ClassifySearch></ClassifySearch>
      <el-table :data="ClassifyState.classifyThreeTable" border v-loading="ClassifyState.loading">
        <el-table-column label="id" prop="id" width="100px" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column label="最后修改时间" prop="updated" width="140px" align="center"> </el-table-column>
        <el-table-column label="一级分类名称" prop="name" min-width="100px" header-align="center"> </el-table-column>
        <el-table-column label="二级分类名称" prop="name2" min-width="100px" header-align="center"> </el-table-column>
        <el-table-column label="三级分类名称" prop="name3" min-width="100px" header-align="center"> </el-table-column>
        <el-table-column label="是否有详细内容" min-width="110px" header-align="center">
          <template slot-scope="scope">
            <span :style="{color:scope.row.summarize==null?'red':''}">
              {{scope.row.summarize==null?'否':'有'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="150px" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" active-text="启用" inactive-text="停用" @change="editState($event,scope.row.id)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row.id,scope.row.name3,scope.row.classify_one_id,scope.row.classify_two_id)">修改</el-button>
            <el-button type="warning" icon="el-icon-plus" @click="classifyDetailEdit(scope.row.id,scope.row.summarize, scope.row.argumentsArray, scope.row.demo)">编辑详细内容</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delOneClassify(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col>
      <AddClassify></AddClassify>
      <AddClassifyDetail :summarize='summarize' :argumentsArray='argumentsArray' :demo='demo'></AddClassifyDetail>
    </el-col>
  </el-row>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import AddClassify from '../components/AddClassify'
import AddClassifyDetail from '../components/AddClassifyDetail'
import ClassifySearch from '../components/ClassifySearch'
export default {
  //import引入的组件
  components: { AddClassify, AddClassifyDetail, ClassifySearch },
  //子组件引用父组件:data=data 方法@search=search使用this.emit('search', '参数');
  props: [],
  data () {
    return {
      seachData: {
        seachDataVal: '',
        seachDataSelect: '',
        seachDataSelect2: ''
      },
      summarize: '', //概述
      argumentsArray: [{ //参数
        name: '',//参数名称
        type: '',//参数类型
        describe: ''//参数描述
      }, {
        name: '',//参数名称
        type: '',//参数类型
        describe: ''//参数描述 
      }],
      demo: [{
        describe: '',//示例描述
        html: '',//示例HTML代码
        result: ''//示例结果
      }]
    };
  },
  computed: {
    ...mapState('Classify', { //使用如下 {{ ClassifyState.name }}  console.log(this.ClassifyState.name)
      ClassifyState: state => state
    }),
  },
  methods: {
    ...mapActions('Classify', [
      'list', 'classifyState', 'classifyDel', 'seachQuery'
    ]),
    /**点击修改按钮 */
    edit (id, name3, classify_one_id, classify_two_id) {
      this.ClassifyState.addDialog = true;
      this.ClassifyState.classifyRadio = 3;
      this.ClassifyState.addClassifyForm.classifyOneSelect = classify_one_id;
      this.ClassifyState.addClassifyForm.classifyEditId = id;
      this.ClassifyState.addClassifyForm.classifyThreeVal = name3;
      this['seachQuery'](classify_two_id);
    },
    /**是否启用 */
    editState (state, id) {
      let params = {
        state: state,
        rank: 3,
        id: id
      }
      this['classifyState'](params)
    },
    /**删除 */
    delOneClassify (id) {
      let params = {
        id: id,
        rank: 3
      }
      this['classifyDel'](params)
    },
    /**点击编辑详细内容按钮*/
    classifyDetailEdit (id, summarize, argumentsArray, demo) {
      console.log(this.argumentsArray);
      this.summarize = summarize; //概述
      if (argumentsArray != null) {
        this.argumentsArray = JSON.parse(argumentsArray); //参数
      }
      if (demo != null) {
        this.demo = JSON.parse(demo);//示例
      }
      this.ClassifyState.addDetailDialog = true;
      this.ClassifyState.classifyDetailID = id
    }
  },
  created () {
  },
  mounted () {
  },

};
</script>

<style></style>